<!--
 * @Author: Bennty
 * @Date: 2024-11-27 15:04:38
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-11-27 15:25:52
 * @Description: 请填写简介
-->
<template>
    <el-dialog :model-value="props.visible" title="外协厂详情" width="30%" @close="handleClose">
        <el-table :data="factoryList" row-key='id' class='draggable'>
            <el-table-column label="外协厂名称" prop="company_name" align="center"></el-table-column>
            <el-table-column label="外协厂排序" prop="sort" align="center">
                <template #default="scope">
                    {{ scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-tooltip content="排序" placement="top">
                            <el-button type="primary" :style="{fontSize:'15px'}" icon="Edit"></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除" placement="top">
                            <el-button type="danger" :style="{fontSize:'15px'}" icon="Delete" @click="handleClickDelte(scope.$index)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import Sortable, { SortableEvent } from 'sortablejs';
import { editProcessApi } from '@/api/sj/purchaseManagement/processManagement/index';

const props = defineProps<{
    visible: boolean,
    formModel: any
}>();
const emits = defineEmits(['close','submit']);

const factoryList = ref<any[]>([]);


watch(()=>props.formModel, ()=>{
    factoryList.value = props.formModel.supplyFactoryName;
    rowDrag();
});

const handleClickDelte = (index: any) => {
    factoryList.value.splice(index,1);
};

const rowDrag = () => {
    // 要拖拽元素的父容器
	const tbody = document.querySelector(
		".draggable .el-table__body-wrapper tbody"
	);
	if (!tbody) return;
    Sortable.create(tbody as HTMLElement, {
		//  可被拖拽的子元素
		draggable: ".draggable .el-table__row",
		animation: 600,
		onEnd(event: SortableEvent) {
			if (event.oldIndex !== undefined && event.newIndex !== undefined) {
				const currRow = factoryList.value.splice(event.oldIndex, 1)[0];
				factoryList.value.splice(event.newIndex, 0, currRow);
			}
		},
	});
};

const handleSubmit = async () => {
    const factoryData = factoryList.value.map((item:any, index:number)=>{
        return {
            supplyFactoriesId: item.id,
            sort: index + 1
        };
    });
    const submitData = {
        ...props.formModel,
        supplyJoinWorkProcedures: factoryData
    };
    const { code } = await editProcessApi(submitData);
    if(code == 200){
        emits('submit', true);
        handleClose();
    }else{
        emits('submit', false);
    };
};

const handleClose = () => {
    
    emits('close');
};


</script>

<style scoped>

</style>